<template>
    <editClassTeacherView ref="editClassTeacherView"/>
    <uploadScheduleView ref="uploadScheduleView"/>
    <div class="app-table">
        <div class="app-body">
            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="姓名" style="width:200px">
                        <el-input placeholder="请输入姓名" v-model="form.teacherName"></el-input>
                    </el-form-item>
                    <el-form-item label="班级" prop="gradeId" style="width:200px">
                        <el-select clearable v-model="form.className" autocomplete="off" placeholder="请选择班级">
                            <el-option v-for="item in classList" :key="item.classId"
                                       :value="item.className" :label="item.className"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit"  @keyup.enter="searchEnter">搜索</el-button>
                        <el-button type="success" @click="getScheduleTemplate">下载模板</el-button>
                        <el-button type="warning" @click="uploadSchedule">上传课表</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table size="small" :data="list" border @cell-click="changeTeacher">
                <el-table-column prop="id" label="序号" width="60" align="center"/>
                <el-table-column prop="className" label="班级" width="120" align="center"/>
                <el-table-column prop="subject1.teacherName" label="语文" align="center"/>
                <el-table-column prop="subject2.teacherName" label="数学" align="center"/>
                <el-table-column prop="subject3.teacherName" label="英语" align="center"/>
                <el-table-column prop="subject4.teacherName" label="物理" align="center"/>
                <el-table-column prop="subject5.teacherName" label="化学" align="center"/>
                <el-table-column prop="subject6.teacherName" label="生物" align="center"/>
                <el-table-column prop="subject8.teacherName" label="历史" align="center"/>
                <el-table-column prop="subject9.teacherName" label="地理" align="center"/>
                <el-table-column prop="subject7.teacherName" label="政治" align="center"/>
                <el-table-column prop="subject10.teacherName" label="技术" align="center"/>
                <el-table-column prop="subject11.teacherName" label="心艺" align="center"/>
                <el-table-column prop="subject12.teacherName" label="体育" align="center"/>
                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <div style="margin-top: 10px">
                <el-config-provider :locale="locale">
                    <el-pagination :page-count="pages" :page-size="limit" :current-page="page" layout="prev, pager, next, jumper" @size-change="changePageSize" @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
        <bottomView></bottomView>
    </div>
</template>
<script>
    import editClassTeacherView from '../../components/schedule/editClassTeacher';
    import uploadScheduleView from "../../components/schedule/uploadSchedule";
    import {ElConfigProvider, ElMessageBox, ElMessage} from "element-plus";
    import zhCn from "element-plus/lib/locale/lang/zh-cn";
    import {httpService} from "@/utils/httpService";
    import {Picture as IconPicture,Upload } from "@element-plus/icons-vue";
    import bottomView from "@/components/bottom.vue";

    export default {
        name: "classTeacherList",
        data() {
            return {
                type: 0,
                title: "",
                page: 1,
                pages: 0,
                pageSize: 10,
                total: 0,
                limit: 10,
                list: [],
                classList: [],
                departmentList: [],
                form: {
                    teacherName: "",
                    className:""
                },
            };
        },
        components: {
            editClassTeacherView,
            uploadScheduleView,
            IconPicture,
            ElConfigProvider,
            ElMessageBox,
            bottomView,
            ElMessage,Upload
        },
        setup() {
            return {
                locale: zhCn,
            };
        },
        mounted() {
            this.getClassTeacherList();
            this.getClassList();
        },
        methods: {
            uploadSchedule(){
                this.$refs.uploadScheduleView.title = '上传任课安排';
                this.$refs.uploadScheduleView.dialogFormVisible = true
            },
            changeTeacher(row, column, cell, event) {
                let subject = column.label, info = column.property.split('.');
                let teacher = row[info[0]];
                let teacherNumber = "";
                let className=row['className'];
                if(teacher){
                    teacherNumber = teacher['teacherNumber'];
                }
                if((subject!='序号')&(subject!='班级')){
                    this.editClassTeacher(teacherNumber, className, subject)
                }
            },
            editClassTeacher(teacherNumber, className, subject) {
                this.$refs.editClassTeacherView.title = '修改任课人员';
                this.$refs.editClassTeacherView.classTeacherForm.className = className;
                this.$refs.editClassTeacherView.classTeacherForm.subject = subject;
                this.$refs.editClassTeacherView.classTeacherForm.teacherNumber = teacherNumber;
                this.$refs.editClassTeacherView.getTeacherSubjectList();
                this.$refs.editClassTeacherView.dialogFormVisible = true
            },
            searchEnter: function (e) {
                // 使用 which 和 keyCode 属性来解决兼容问题
                var keyCode = window.event ? e.keyCode : e.which;
                var val = e.target.value;
                if (keyCode == 13 && val) {
                    this.page = 1;
                    this.getClassTeacherList();
                }
            },
            editTeacherSubjectInfo(data) {
                this.$refs.editClassTeacherView.title = '修改人员任教学科';
                this.$refs.editClassTeacherView.departmentList = this.departmentList;
                this.$refs.editClassTeacherView.teacherForm = JSON.parse(JSON.stringify(data));
                this.$refs.editClassTeacherView.dialogFormVisible = true
            },
            deleteTeacherDepartment(teacherNumber) {
                ElMessageBox.confirm("该操作不会删除老师，确定要删除该老师的学科信息吗？", "提醒", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        httpService("/pythonApi/attendanceApi/deleteTeacherSubject", "teacherNumber=" + teacherNumber, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success(data.message);
                                    this.getClassTeacherList();
                                } else {
                                    ElMessage.error(data.message);
                                }
                            }
                        );
                    })
                    .catch(() => {
                    });
            },
            reloadData(){
                this.page=1;
                this.getClassTeacherList()
            },
            exportExcel() {
                httpService(
                    "/api/teacherSignInStatistics/exportExcel",
                    {
                        "teacherNumber": this.form.teacherNumber,
                        "teacherName": this.form.teacherName,
                        "departmentName": this.form.departmentName,
                        "leaveType": this.form.leaveType,
                        "submitter": this.form.submitter,
                    },
                    "get"
                ).then((data) => {
                    if (data.code == 200) {
                        window.open(data.msg, '_blank')
                    }
                });
            },
            onSubmit() {
                this.page = 1;
                this.getClassTeacherList();
            },
            // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
            changePageSize(size) {
                this.pageSize = size;
                this.limit = size;
                this.getClassTeacherList();
            },

            // 改变页码，page：回调参数，表示当前选中的“页码”
            changeCurrentPage(page) {
                this.page = page;
                this.getClassTeacherList();
            },
            getScheduleTemplate() {
                let config = { "responseType": "blob" };
                httpService(
                    "/pythonApi/scheduleApi/getScheduleTemplate",
                    {
                        fileType:'teacher'
                    },
                    "get", config
                ).then((data) => {
                    let link=document.createElement('a'), fileUrl=window.URL.createObjectURL(new Blob([data]));
                    link.style.display='none';
                    link.href=fileUrl;
                    link.setAttribute('download', '任课安排模板.xlsx');
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(fileUrl)
                });
            },
            getClassTeacherList() {
                httpService(
                    "/pythonApi/scheduleApi/getClassTeacherList",
                    {
                        page : this.page,
                        className: this.form.className,
                        teacherName: this.form.teacherName
                    },
                    "get"
                ).then((data) => {
                    this.list = data.data;
                    this.pages = data.pages;
                    this.total = data.total
                });
            },
            getClassList() {
                httpService(
                    "/pythonApi/scheduleApi/getClassList",
                    {
                    },
                    "get"
                ).then((data) => {
                    this.classList = data.data;
                });
            },
        },
    };
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 10px;
    width: calc(100vw - 220px);
}

.app-search {
}


.app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 204px);
}
</style>

